<script setup lang="ts">
import { NDataTable, NSelect } from "naive-ui"
const props = defineProps<{
  rankingData: any
  userRanking: any
  handleGetRanking: (data: any) => void
}>()
let index = 1
const columns = [
  {
    title: "排名",
    key: "index",
    render(row: any) {
      return index++
    },
  },
  {
    title: "用户ID",
    key: "userId",
  },
  {
    title: "用户名",
    key: "userNameCount",
  },
  {
    title: "用户手机号",
    key: "phoneNumber",
  },
  {
    title: "用户地址",
    key: "userAddress",
  },
  {
    title: "用户名消费金额",
    key: "userIndentAmountCount",
  },
  {
    title: "用户名订单数",
    key: "indentNum",
  },
]

const type = [
  {
    label: "昨日",
    value: "Yesterday",
  },
  {
    label: "今日",
    value: "Today",
  },
  {
    label: "全部",
    value: "Count",
  },
]

const typeUpdate = (value: any) => {
  props.handleGetRanking({ type: value })
  index = 1
}
</script>
<template>
  <div class="list">
    <div class="top">
      <div class="title_one">销量排行榜:</div>
      <div v-for="(item, index) in props.rankingData" class="list_item">
        <div class="index">{{ index + 1 }}</div>
        <div class="good_name">{{ item.orderName }}</div>
        <div class="orderNum">{{ item.orderNum }}</div>
      </div>
      <div v-if="!props.rankingData.length" class="noData">
        暂无数据
      </div>
    </div>
    <div class="down">
      <div class="title">
        <p>用户消费榜:</p>
        <n-select class="title_select" :options="type" default-value="Count" :on-update:value="typeUpdate" />
      </div>
      <n-data-table flex-height class="table" :columns="columns" :data="props.userRanking" :pagination="false"
        :bordered="false" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list {
  width: 100%;
  // height: 100vh;
  // padding: 15px;

  @media screen and (max-width: 600px) {
    margin-left: 0;
    margin-top: 20px;
    width: 100%;
    height: 100%;
  }

  .top {
    padding: 15px;
    height: 50%;
    background-color: var(--BlockBgColor);

    .noData {
      height: 300px;
      width: 100%;
      text-align: center;
      line-height: 300px;
    }

    .title_one {
      color: var(--TextColor);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;


    }

    .list_item {
      margin-bottom: 12px;
      display: flex;
      // height: 40px;
      border: 1px solid var(--borderColor);
      color: var(--TextColor);
      justify-content: space-between;
      padding-left: 20px;
      padding-right: 20px;
      align-items: center;
      border-radius: 4px;

      @media screen and (max-width: 600px) {
        margin-bottom: 12px;
        display: flex;
        // height: 30px;
        border: 1px solid var(--borderColor);
        color: var(--TextColor);
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
        align-items: center;
        border-radius: 4px;
      }
    }
  }

  .down {
    padding: 15px;
    height: 50%;
    background-color: var(--BlockBgColor);
    margin-top: 20px;

    .title {
      color: var(--TextColor);
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;

      .title_select {
        width: 120px;
      }
    }

    .table {
      height: 35vh;
    }
  }
}
</style>
